Skip to content

[a11y] voice message improvements #5980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
bmarty merged 8 commits into from
Jan 13, 2026
Merged

[a11y] voice message improvements #5980

bmarty merged 8 commits into from
Jan 13, 2026

Conversation

@bmarty
Copy link
Member

@bmarty bmarty commented Jan 8, 2026

Content

Improve IconButton on the composer area regarding accessibility focus when the screen reader is enabled and when the user is navigating with a keyboard.

Motivation and context

Closes https://github.com/element-hq/customer-success/issues/556

Screenshots / GIFs

Tests

Using the emulator

  • Open a room timeline
  • Using the keyboard arrows, navigate to the microphone icon to start recording a voice message.
  • Pressing the space bar of the keyboard, you should be able to start recording, stop recording and send the voice message without losing the focus on the icon.

When a voice message as been recorded but not sent, you should be able to navigate to the play icon and press the space bar several times to start/pause the playback without losing the focus

When a voice message as been recorded but not sent, you should be able to navigate to bin icon and press the space bar to delete the pending voice message without losing the focus, which is still on the same icon area. The icon is now the "Attachement" icon.

Using a real device with screen reader enabled

You should be able to perform the same actions using a real device with screen reader enabled.

Tested devices

  • Physical
  • Emulator
  • OS version(s):

Checklist

  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly define what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

@bmarty bmarty requested a review from a team as a code owner January 8, 2026 13:53
@bmarty bmarty added the PR-Misc For other changes label Jan 8, 2026
@bmarty bmarty requested review from ganfra and removed request for a team January 8, 2026 13:53
@github-actions
Copy link
Contributor

github-actions bot commented Jan 8, 2026 •
edited
Loading

📱 Scan the QR code below to install the build (arm64 only) for this PR.
QR code
If you can't scan the QR code you can install the build via this link: https://i.diawi.com/SQcfMU

@codecov
Copy link

codecov bot commented Jan 8, 2026 •
edited
Loading

Codecov Report

❌ Patch coverage is 83.90805% with 28 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.35%. Comparing base (8a290c3) to head (2a3843b).
⚠️ Report is 56 commits behind head on develop.

Files with missing lines Patch % Lines
...ent/android/libraries/textcomposer/TextComposer.kt 78.62% 27 Missing and 1 partial ⚠️
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop    #5980      +/-   ##
===========================================
+ Coverage    81.33%   81.35%   +0.01%     
===========================================
  Files         2545     2545              
  Lines        67760    67774      +14     
  Branches      8684     8682       -2     
===========================================
+ Hits         55113    55136      +23     
+ Misses        9429     9421       -8     
+ Partials      3218     3217       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ganfra
ganfra approved these changes Jan 9, 2026
View reviewed changes
Copy link
Member

@ganfra ganfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One remark regarding naming.
Also the code is bit hard to follow as we are now checking the same state in multiple places...

.../textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
Spacer(modifier = Modifier.width(12.dp))
}
is MessageComposerMode.EditCaption -> {
Spacer(modifier = Modifier.width(19.dp))
Copy link
Member

@ganfra ganfra Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's not new but those spacings are a bit...weird?

Copy link
Member Author

@bmarty bmarty Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, not new, and I think this matches the design for those composer modes.

...oser/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt Outdated
* Temporary Figma : https://www.figma.com/design/Ni6Ii8YKtmXCKYNE90cC67/Timeline-(new)?node-id=2274-39944&m=dev
*/
@Composable
internal fun SendButton(
Copy link
Member

@ganfra ganfra Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels like it shouldn't be called a Button anymore, as it's just an Icon. Can you rename? This one and all the others Button.

@bmarty
Copy link
Member Author

bmarty commented Jan 12, 2026

Also the code is bit hard to follow as we are now checking the same state in multiple places...

I agree, but this is the price to pay to have only one IconButton in order to keep the accessibility focus when the icon (and the click callback) change. I'll try to find a better approach.

@bmarty
Copy link
Member Author

bmarty commented Jan 12, 2026

@ganfra , PR updated, thanks for the remarks.

@bmarty bmarty added the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jan 12, 2026
@github-actions github-actions bot removed the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jan 12, 2026
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 12, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

ganfra
ganfra approved these changes Jan 12, 2026
View reviewed changes
Copy link
Member

@ganfra ganfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the changes, it's better like this!

@bmarty bmarty merged commit e311a71 into develop Jan 13, 2026
31 of 32 checks passed
@bmarty bmarty deleted the feature/bma/a11y/voiceMessageImprovements branch January 13, 2026 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ganfra ganfra ganfra approved these changes

Assignees

No one assigned

Labels

PR-Misc For other changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@bmarty @ganfra @ElementBot